﻿/**
 *
 * //订单详情列表
 *
 * Created by wzj on 2017/3/20.
 */



/*--------------------------------------------------------------------------------------------*/
var stateArray = [
	{operator:'上传双签合同',url:"uploadContract.html"},
	{operator:'核对合同',url:"proofContract.html"},
	{operator:'首付款',url:""},
	{operator:'上传放货单',url:"uploadDeliver.html"},
	{operator:'校对放货单',url:"proofDeliver.html"},
	{operator:'上传结算单',url:"uploadSettlement.html"},
	{operator:'核对结算',url:"proofSettlement.html"}
];

var products = [];
function addProducts() {
	products=[];
	const startId = products.length;
	for (var i = 0; i < 5; i++) {
		const id = startId + i;
		if(i%2==0){
			products.push({
				id: id,
				time:"2017-03-30 10:32:00",
				type:"more",
				data:[
					{name: 'PB粉' + id, number:"10000湿吨", price: 2100 + i},
					{name: 'PB粉' + id, number:"10000湿吨", price: 2100 + i}
				],
				state: parseInt(Math.random()*stateArray.length-1)
			});
		}else{
			products.push({

				id: id,
				time:"2017-03-30 10:32:00",
				name: 'PB粉' + id,
				number:"10000湿吨",
				price: 2100 + i,
				state: parseInt(Math.random()*stateArray.length-1)
			});
		}
	}
}

/*--------------------------------------------------------------------------------------------*/
class PurchaseListTable extends React.Component {

	constructor(props) {
		super(props);
		//初始数据
		this.products = products;
		this.state = {
			datas:[],
			totalSize: 0,
			sizePerPage: 10,
			page: 1
		}


		//数据行选中配置
		this.selectRowProp  = {
			mode: 'radio',
			onSelect: this.onRowSelect,
			onSelectAll: this.onSelectAll
		}

		this.ajaxRequestData = this.ajaxRequestData.bind(this);
		this.handlePageChange = this.handlePageChange.bind(this);
		this.handleSizePerPageChange = this.handleSizePerPageChange.bind(this);

	}
	/*******************************************************************/
	//DOM加载完成
	componentDidMount(){
		//请求第1页数据，且每页显示5条
		this.ajaxRequestData();
	}
	/*******************************************************************/

	ajaxRequestData(page = this.state.page, sizePerPage = this.state.sizePerPage) {
		//alert("请求第" + page + "页数据，每页显示" + sizePerPage);
		addProducts();
		const currentIndex = (page - 1) * sizePerPage;
		this.setState({
			datas: products.slice(currentIndex, currentIndex + sizePerPage),
			totalSize: products.length,
			page:page,
			sizePerPage:sizePerPage
		})


		//ajax加载数据
		/*
		$.ajax({
			url:this.props.url,
			success:function(str,msg,response){
				if(response.statusText=="OK"){
					var result = JSON.parse(response.responseText);
					this.setState({
						datas:products
					});

				}
			}.bind(this),
			error:function(str,msg,response){

			}.bind(this)
		});
		*/
	}
	/*******************************************************************/

	//分页数量选项事件
	handleSizePerPageChange(sizePerPage){
		this.ajaxRequestData(1, sizePerPage);
	}

	//分页事件
	handlePageChange(page, sizePerPage){
		this.ajaxRequestData(page,sizePerPage);
	}

	/*******************************************************************/
	//是否可展开
	isExpandableRow = (row) =>{
		return true;
	}
	//显示展开的内容
	expandComponent = () =>{

	}
	/*******************************************************************/
	//选中行
	onRowSelect = (row, isSelected) =>{
		var rowArr = [];
		if(isSelected) {
			rowArr.push(row.id);
		}
	}
	onSelectAll = (isSelected, currentDisplayAndSelectedData) =>{

	}

	/*******************************************************************/
	render() {

		//配置
		const tableOptions = {
			noDataText: '暂无可用数据',

			page: this.state.page,		//当前第几页
			sizePerPage: this.state.sizePerPage,	//每页显示几条
			onPageChange: this.handlePageChange,  //分页事件
			onSizePerPageList: this.handleSizePerPageChange, //分页下拉事件

			sizePerPageList: [
				{text: '5', value: 5},
				{text: '10', value: 10 },
				{text:'所有', value:this.products.length}
			],				//分页数量选项
			sizePerPage: this.state.sizePerPage,	//每页显示条数
			pageStartIndex: this.state.currentPage, //	分页开始索引
			paginationSize: 3,	//分页数字按钮个数
			prePage: '上一页',
			nextPage: '下一页',
			firstPage: '首页',
			lastPage: '尾页'
		}

		return (
				<BootstrapTable data={ this.state.datas }
								remote={true}
								striped hover
								fetchInfo={ { dataTotalSize: this.state.totalSize } }
								options={ tableOptions }
								pagination={ true }
								insertRow={false}
								deleteRow={false}
								//selectRow={ this.selectRowProp }
								>
					<TableHeaderColumn dataField='time'  isKey={ true }>下单时间</TableHeaderColumn>
					<TableHeaderColumn dataField='name' dataFormat={customFormatterName}>品名</TableHeaderColumn>
					<TableHeaderColumn dataField='number' dataFormat={customFormatterNumber}>数量 </TableHeaderColumn>
					<TableHeaderColumn dataField='price'dataFormat={customFormatterPrice}>价格 </TableHeaderColumn>
					<TableHeaderColumn dataField='state' dataFormat={customFormatterState} >订单状态 </TableHeaderColumn>
					<TableHeaderColumn dataField='state' dataFormat={customFormatterOperation} >操作 </TableHeaderColumn>
				</BootstrapTable>
		);
	}
}


//自定义格式化表格内容
function customFormatterState(cell,row){
	return "<a href='myDetail.html'>订单详情</a>";
}
//自定义操作
function customFormatterOperation(cell,row){
	return "<a class='btn btn-ghost btn-info' href='"+stateArray[cell].url+"'>"+stateArray[cell].operator+"</a>";
}
//格式化货品
function customFormatterName(cell,row){
	if(row.type && row.type == "more"){
		return getFieldFormatterData(row.data,"name");
	}else{
		return cell;
	}
}
//格式化数量
function customFormatterNumber(cell,row){
	if(row.type && row.type == "more"){
		return getFieldFormatterData(row.data,"number");
	}else{
		return cell;
	}
}
//格式化价格
function customFormatterPrice(cell,row){
	if(row.type && row.type == "more"){
		return getFieldFormatterData(row.data,"price");
	}else{
		return cell;
	}
}
//根据key取一船二货的数据

function getFieldFormatterData(data,key){
	var html = "";
	for(var d in data){
		html +="<div style='margin:5px 0;'>"+data[d][key]+"</div>";
	}
	return html;
}
